<template>
	<view>

		<view class="bg-white">
			<view style="flex: 1;flex-direction: column;">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(vo,index) in imgList" :key="index">
							<view class="uni-uploader__file" style="position: relative;margin: 1%;">
								<image v-if="vo.type=='images'" mode="aspectFill" class="uni-uploader__img"
									:src="vo.attachment|getImg">
								</image>
							 
								<template v-if="vo.type=='music'">
									<image v-if="!vo.is_play" @click="on_play(index)" mode="aspectFill"
										class="uni-uploader__img" src="@/static/play.png">
									</image>
									<image v-else @click="mp3_for(index)" mode="aspectFill" class="uni-uploader__img"
										src="@/static/playing.png">
									</image>
								</template>
								<video v-if="vo.type=='video'" :src="vo.attachment|getImg"
									class="uni-uploader__img"></video>
								<view style="z-index: 99;" class="close-view" @click="close(index)">x</view>
							</view>
						</block>
						<button @tap="chooseImg" class="uni-uploader__input-box a-c banmi_flex j-c"
							v-show="imgList.length < count" style="margin: 1%">
							<text class="c_pl bicon" style="font-size: 90upx;">+</text>
						</button>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog_image" type="dialog">
			<uni-popup-image :imgList="imgList.length" :count="count" :t_type="t_type" :t_name="t_name"
				@confirm="confirm">
			</uni-popup-image>
		</uni-popup>
	</view>
</template>

<script type="text/javascript">
	export default {
		name: 'up-img',
		props: {
			count: {
				//最多数量
				type: Number | String,
				default: 9
			},
			t_type: {
				//类型
				type: Number | String,
				default: 'images'
			},
			field: {

				type: Number | String,
				default: ''
			},
			val: {

				type: Number | String,
				default: ''
			},
			name: {

				type: Number | String,
				default: ''
			},
			list: {
				type: Number | String | Object | Array,
				default: ''
			},
		},
		data() {
			return {
				tempFilePath: '',
				t_name: '',
				imgList: [],
				img_url: '',
			 
			}
		},
		mounted() {
	 
			this.init();
		},
		methods: {
			init() {
				this.img_url = uni.getStorageSync('img_url')
				var types = typeof(this.list);
                 if (!this.list) {
                 	return
                 }  

				if (types == 'string') {
					var find = {
						attachment: this.list,
						type: this.t_type
					}
					this.imgList.push(find);
				} else if (types == 'object') {

					this.imgList = this.list;

				}




				if (this.t_type == 'images') {
					this.t_name = '图片';
				} else if (this.t_type == 'video') {
					this.t_name = '视频';
				} else if (this.t_type == 'music') {
					this.t_name = '音频';
				}
			},
			mp3_for() {
				for (var i = 0; i < this.imgList.length; i++) {
					this.imgList[i]['is_play'] = false;
				}
				if (this.is_mp3) {
					this.innerAudioContext.stop();
				}
			},
			on_play(index) {
				this.mp3_for();
				var mp3 = this.img_url + this.imgList[index]['attachment'];
				var that = this;
				if (!this.imgList[index]['is_play']) {
					this.imgList[index]['is_play'] = true;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					this.innerAudioContext.src = mp3;
					that.is_mp3 = true;
					this.innerAudioContext.onPlay(() => {

					});
				} else {
					that.is_mp3 = false;
					this.imgList[index]['is_play'] = false;
					this.innerAudioContext.stop();
				}
			},
			confirm(val, img_url) {
				this.img_url = img_url;
				if (this.imgList.length > 0) {
					this.imgList = this.imgList.concat(val);
				} else {
					this.imgList = val;
				}

				this.$emit('confirm', this.imgList, this.img_url, this.field, this.val, this.name)
			},
			close(e) {
				var imgList = this.imgList;
				imgList.splice(e, 1);
				this.$emit("confirm", imgList, this.img_url, this.field, this.val, this.name);

			},
			previewImage(image) { //预览图片
				uni.previewImage({
					urls: this.imgList,
					current: image
				});
			},
			chooseImg() {
				this.$refs.alertDialog_image.open()
			},

		}
	}
</script>
<style scoped>
	button {
		background-color: transparent;
	}

	button::after {
		border: none;
	}

	/* #ifndef APP-NVUE */
	.set-capital {
		text-align: center;
		line-height: 30px;
		height: 30px;
		padding: 0 5px;
		right: 0;
		/* width: 30px; */
		background: #1AAD19;
		color: #FFFFFF;
		position: absolute;
		bottom: 0px;
		font-size: 12px;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}

	.uni-uploader__input-box {
		position: relative;
		width: 208upx;
		height: 208upx;
		border: 2upx solid #D9D9D9;
	}

	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uni-uploader-body {
		margin-top: 16upx;
	}

	.uni-uploader__files {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uni-uploader__img {
		display: block;
		width: 100px;
		height: 100px;
	}

	/* #endif */
</style>